<template>
	<view>
		<view class="modelbox">
			<view class="paddbox">
				<view class="goodsinfo" v-if="info">
					<view class="goodsimg">
						<image :src="limitinfo[0].image.full_url||info.goods_images[0].full_url"></image>
					</view>
					<view class="namebox">
						<view class="name">{{info.goods_name}}</view>
						<!-- 是否代理商字段 is_agent 0否 1是 -->
						<view class="pricebox">
							<text>￥</text>
							{{limitinfo[0].goods_price||info.goods_price_min}}
							<text style="text-decoration: line-through;color: #888888;"
								v-if="limitinfo[0].line_price>0&&info.line_price_min>0">￥{{limitinfo[0].line_price||info.line_price_min}}</text>
						</view>
						<!-- <view class="pricebox" v-else>
							<text>￥</text>
							{{limitinfo[0].goods_price||info.goods_price_min}}
							<text style="text-decoration: line-through;color: #888888;"  v-if="limitinfo[0].line_price>0&&info.line_price_min>0">{{limitinfo[0].line_price||info.line_price_min}}积分</text>
						</view> -->
						<!-- <view class="pricebox" v-if="info.is_agent==0">
							<text>￥</text>
							{{limitinfo[0].goods_price||info.goods_price_min}}
							<text style="text-decoration: line-through;color: #888888;">￥{{limitinfo[0].line_price||info.line_price_min}}</text>
						</view> -->
					</view>
					<view class="choosen">
						<image src="../static/gb.png" @click="close()"></image>
					</view>
				</view>
				<view style="height: 60rpx;"></view>
				<!-- spec_type 10为单规格，20为多规格 -->
				<view v-if="info.spec_type==20">规格</view>
				<view class="stokebox" v-if="info.spec_type==20">
					<view v-for="(item,index) in specList" :key="index">
						<view class="spec_name">{{item.spec_name}}</view>
						<view class="specbox">
							<!-- selectlist.indexOf(item)==-1 -->
							<view v-for="(sitem,sindex) in item.valueList" :key="sitem.spec_value_id">
								<view @click="changeSelect(index,sitem.spec_value_id,item)">
									<view :class="[sitem.spec_value_id==item.select?'actstoke':'itemstoke']">
										{{sitem.spec_value}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- <view :class="[item.spec_id==currone?'actstoke':'itemstoke']" v-for="(item,index) in info.specList" :key="item.spec_id" @click="handlespec(item.spec_id)">
						<view >{{item.spec_name}}</view>
					</view> -->
				</view>
				<!-- <view class="stokebox"  v-if="info.spec_type==20">
					<view :class="[item.spec_value_id==currtwo?'actstoke':'itemstoke']" v-for="(item,index) in valueList[0].valueList" :key="item.spec_value_id" @click="handlevalue(item.spec_value_id)">
						<view >{{item.spec_value}}</view>
					</view>
				</view> -->
				<view class="number">
					<view>数量</view>
					<view class="numbox">
						<image @click="reduce()" src="../static/jian.png"></image>
						<view>{{count}}</view>
						<image @click="add()" src="../static/add.png"></image>
					</view>
				</view>
				<view v-if="info.spec_type==10" style="min-height: 200rpx;"></view>
				<view v-if="info.spec_type==20" style="min-height: 50rpx;"></view>
				<view class="surebox" @click="tocreateorder()">
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "bottompopup",
		props: {
			info: {
				type: Object,
				default: {},
			},
			addorcar: {
				type: Boolean,
				default: null //判断弹窗内容是购物车(true),还是立即购买(false)
			},
			addressid: {
				type: Number,
				defalut: 0
			},
			jifen: {
				type: Boolean,
				default: null //判断弹窗商品是积分(true),还是非积分(false)
			},
		},

		data() {
			return {
				stokelist: ['偏光变色表盘 ax2513', 'AX1325', '时尚硅胶表带 ax1326', '礼盒款硅胶表带 ax7105'],
				currone: null, //一次规格id
				valueList: [], //根据一次规格获取的二次规格列表
				currtwo: null, //二次规格id
				count: 1, //商品数量
				limitinfo: [], //选完规格后得到的数据（商品价钱，库存等）
				spec_id: [], //选中后的所有规格列表
				selectlist: [],
				specList: [],
				spec_name: []
			};
		},
		created() {

		},
		watch: {
			info: {
				immediate:true,
				handler(newValue,oldValue){
					this.count = 1
					console.log(newValue,oldValue,this.addressid, 'addressid', this.addorcar, 'info', this.info)
					this.limitinfo = []
					this.specList = this.info.specList
					console.log(this.specList, this.info, 'this.info')
					if(this.specList){
						this.specList.forEach((item) => {
							item.select = null
						})
						if (this.info.spec_type == 10) {
							this.limitinfo = this.info.skuList
							console.log(this.info.skuList, 'this.info.skuList')
						}
					}
				}

			}
		},
		computed: {
			//计算选中商品的总价
			totalPrice() {
				let totalPrice = 0;
				this.limitinfo.map(
					item => { //是否代理商字段 is_agent 0否 1是(this.info.is_agent==0?item.goods_price:item.agent_price)
						totalPrice += this.count * (this.info.is_agent == 0 ? item.goods_price : item.goods_price)
					})
				parseFloat(totalPrice.toFixed(2))
				// console.log(parseFloat(totalPrice.toFixed(2)))
				// return totalPrice
				return parseFloat(totalPrice.toFixed(2)) // 保留小数点后2位
			},

		},
		methods: {
			changeSelect(index, id, item) {
				this.specList[index].select = id
				const nums = this.specList.map(item => item.select).join('_')
				// this.spec_id = this.spec_id.push(nums)
				this.limitinfo = this.info.skuList.filter(item => item.goods_sku_id == nums)
				this.spec_id = [nums]
				console.log(this.limitinfo, 'this.limitinfo', nums, this.spec_id)
			},
			close() {
				this.$emit('close')
			},
			//选择一次规格
			handlespec(id) {
				// this.spec_id=[]
				// this.currone = id
				// this.valueList = this.info.specList.filter(item => item.spec_id==this.currone)
				// console.log(this.valueList,this.valueList[0].valueList,this.currone)
			},
			//根据一次规格选择二次规格
			handlevalue(item, index, sitem) {},
			//商品数量见
			reduce() {
				if (this.count == 1) {
					uni.showToast({
						title: '数量限制最低为1',
						icon: 'none'
					})
				} else {
					this.count--
				}
			},
			add() {
				//spec_type 10为单规格，20为多规格
				if (this.info.spec_type == 10) {
					// 单规格
					if (this.count < this.info.skuList[0].stock_num) {
						this.count++
					} else {
						uni.showToast({
							title: '已超过商家库存数量',
							icon: 'none'
						})
					}
				} else {
					//多规格
					if (this.limitinfo.length !== 0) {
						if (this.limitinfo[0].stock_num > this.count) {
							this.count++
						} else {
							uni.showToast({
								title: '已超过商家库存数量',
								icon: 'none'
							})
						}
					} else {
						uni.showToast({
							title: '请先选择规格',
							icon: 'none'
						})
					}
				}
			},
			tocreateorder() {
				console.log(this.limitinfo, 'this.limitinfo')
				if (this.info.spec_type == 20 && this.limitinfo.length == 0) {
					uni.showToast({
						title: '请先选择规格',
						icon: 'none'
					})
					return
				}
				const infos = {
					token: uni.getStorageSync('token'),
					goods_id: String(this.info.id).split(','),
					spec_id: this.spec_id,
					goods_num: String(this.count).split(','),
					goods_price: String(this.totalPrice).split(','),
					delivery_method: 1,
					order_total_money: this.totalPrice,
					order_pay_money: this.totalPrice,
					address_id: this.addressid,
					//是否代理商字段 is_agent 0否 1是
					unit_price: this.info.is_agent == 0 ? this.limitinfo[0].goods_price : this.limitinfo[0]
						.goods_price,
					line_price: this.limitinfo[0].line_price || this.info.line_price_min,
					jifen: this.jifen, //是否是积分商品
				}
				console.log(this.addorcar, 'addorcar')
				this.$emit('toorder', infos)
				// if (this.addorcar) { //判断弹窗内容是购物车(true),还是立即购买(false)
				// 	this.$emit('toShoppingCart', infos)
				// 	console.log('toShoppingCart')
				// 	this.close()
				// } else {

				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modelbox {
		background-color: #FFF;
		border-radius: 20rpx 20rpx 0 0;
		width: 100%;
		padding-bottom: 20rpx;


		.paddbox {
			width: 94%;
			margin: 0 auto;
			padding: 0 3%;

			.goodsinfo {
				display: flex;

				.goodsimg {
					width: 27%;

					image {
						width: 174rpx;
						height: 174rpx;
						position: absolute;
						margin-top: -50rpx;
						background-color: #FFF;
					}
				}

				.namebox {
					width: 63%;
					font-size: 30rpx;
					font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
					font-weight: normal;
					color: #222222;
					margin-top: 10rpx;

					.name {
						-webkit-line-clamp: 2;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
						margin: 20rpx 0;
					}

					.pricebox {
						font-size: 36rpx;
						font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
						font-weight: normal;
						color: #FE5326;

						>text {
							font-size: 24rpx;
						}
					}
				}

				.choosen {
					width: 10%;
					text-align: center;
					margin-top: 20rpx;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.stokebox {
				margin-top: 24rpx;

				.spec_name {
					margin: 24rpx 0;
					font-size: 26rpx;
					font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
					font-weight: normal;
					color: #222222;
				}

				.specbox {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					margin-top: 24rpx;

					.itemstoke {
						width: fit-content;
						padding: 0 22rpx;
						height: 74rpx;
						background: #F2F2F2;
						border-radius: 36rpx;
						line-height: 74rpx;
						font-size: 28rpx;
						font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
						font-weight: normal;
						color: #222222;
						margin: 0 10rpx 24rpx 0;
					}

					.actstoke {
						width: fit-content;
						padding: 0 20rpx;
						height: 70rpx;
						background: #FFF;
						border-radius: 36rpx;
						line-height: 70rpx;
						font-size: 28rpx;
						font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
						font-weight: normal;
						color: #222222;
						border: 2rpx solid #F94D29;
						margin: 0 10rpx 24rpx 0;
						color: #F94D29;
					}
				}

			}

			.number {
				display: flex;
				justify-content: space-between;
				font-size: 30rpx;
				font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
				font-weight: normal;
				color: #222222;


				.numbox {
					display: flex;
					align-items: center;

					image {
						width: 40rpx;
						height: 40rpx;
						margin: 0 5rpx;
					}

					>view {
						min-width: 78rpx;
						text-align: center;
					}
				}
			}

			.surebox {
				width: 100%;
				height: 84rpx;
				background: linear-gradient(360deg, #F99529 0%, #F94D29 100%);
				border-radius: 83rpx;
				margin: 40rpx auto 20rpx 0;
				line-height: 84rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
</style>